<template>
  <div class="home">
    <!-- 导航 -->
    <el-header class="head" style="height: 75px" v-show="$route.meta.istrun">
      <div class="nav">
        <!-- logo+文本 -->
        <div class="left" style="font-size: 18px">
          <div class="block" style="display: flex">
            <el-image
              :src="src"
              style="
                width: 180px;
                height: 65px;
                margin-right: 25px;
                padding-top: 5px;
              "
            ></el-image>
          </div>
        </div>
        <!-- 3大模块 -->
        <el-menu
          :router="true"
          :default-active="$route.name"
          class="el-menu-demo"
          mode="horizontal"
          background-color="rgb(0, 21, 41)"
          text-color="rgb(166, 173, 180)"
          active-text-color="#fff"
        >
          <!-- 问题管理 -->
          <el-menu-item
            index="Question"
            :route="{ path: '/teacher/question' }"
            style="height: 75px; line-height: 75px; font-size: 18px"
            >问题管理</el-menu-item
          >
          <!-- 考试管理 -->
          <el-menu-item
            style="height: 75px; line-height: 75px; font-size: 18px"
            index="teacherexammanage"
            :route="{ path: '/teacher/teacherexammanage' }"
            >考试管理</el-menu-item
          >
          <!-- 成绩管理 -->
          <el-menu-item
            index="chengji"
            :route="{ path: '/teacher/chengji' }"
            style="height: 75px; line-height: 75px; font-size: 18px"
            >成绩管理</el-menu-item
          >
        </el-menu>
        <!-- 头像+名称 -->
        <el-col
          :span="12"
          style="
            display: flex;
            width: 500px;
            padding-left: 150px;
            text-align: center;
          "
        >
          <div class="block" style="padding: 12px">
            <el-avatar :size="50" :src="circleUrl"></el-avatar>
          </div>
          <div class="sub-title" style="line-height: 75px; font-size: 20px">
            欣悦
          </div>
        </el-col>
      </div>
    </el-header>
    <el-main>
      <router-view />
    </el-main>
  </div>
</template>

<script>
export default {
  name: "teacher",
  data() {
    return {
      src: require("../assets/logolc.png"),
      circleUrl: require("../assets/user.jpg"),
      activeIndex: "/question",
    };
  },
};
</script>

<style lang="less" scoped>
/* 顶部导航 */
.el-header {
  width: 100%;
  box-sizing: border-box;
  background-color: rgb(0, 21, 41);
  color: rgb(166, 173, 180);
  text-align: center;
  line-height: 60px;
  height: 75px;
}
.nav {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  .left {
    width: 400px;
    padding-left: 100px;
  }
}
.el-menu {
  height: 75px;
  line-height: 75px;
}
.el-menu-item.is-active {
  background-color: rgb(24, 144, 255) !important;
}
.el-main {
  background-color: #f0f2f5;
  color: #333;
  padding: 0;
}
</style>